<template>
    <div>
        <h1>这里是父组件</h1>
        <el-alert :title="msg" />
        <el-row :gutter="20" >
            <el-col :span="12">
                <Child :msg="msg" @child-click="handlerChildClick"></Child>
            </el-col>
            <!-- 代办清单 -->
            <el-col :span="12">
                </el-col>
                    <h1>这里是代办清单</h1>
                    <ToDo @to-list="addList" @reomve-all="remove"></ToDo>
                    <ul class="list_box">
                        <li v-for="(item,index) in list">{{ index + 1 }} - {{  }}</li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import { ref } from 'vue'
import Child from './components/Child.vue'
import ToDo from './components/ToDo.vue'

export default {
    name: 'Event',
    components: {
        Child,
        ToDo
    },
    setup() {
        const msg = ref("我是父组件的值")
        const list = ref([])
        const handlerChildClick = function (value) {
            msg.value = value
        }
        const addList = function (text) {

        }
        return {
            msg,
            handlerChildClik
        }
    }
}
</script>

<style scoped></style>